import * as React from 'react';
import { MaterialIcons } from '@expo/vector-icons';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import { useNavigation } from '@react-navigation/native';

interface BackButtonProps {
  title?: string;
}

export default function BackButton({ title }: BackButtonProps) {
  const navigation = useNavigation();

  const goBack = () => {
    navigation.goBack();
  };

  return (
    <View style={styles.container}>
      <Pressable onPress={goBack}>
        <MaterialIcons
          style={styles.icon}
          name="arrow-back-ios"
          size={24}
          color="#fff"
        />
      </Pressable>
      <Text style={styles.title}>{title}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 12,
    left: 12,
    zIndex: 1,
    flexDirection: 'row',
    alignItems: 'center',
  },
  icon: {
    textShadowColor: '#777777',
    textShadowOffset: { width: 1, height: 1 },
    textShadowRadius: 3,
  },
  title: {
    fontSize: 20,
    fontWeight: '500',
    color: '#ffffff',
    textShadowColor: '#777777',
    textShadowOffset: { width: 1, height: 1 },
    textShadowRadius: 3,
  },
});
